<template>
    <div class="table">
        <el-table v-loading="loading" :data="tableData" :border="true" style="width: 100%;margin-bottom: 20px;">
            <el-table-column prop="user.nickname" label="用户" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="user.phone" label="联系方式" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="message" label="互动行为" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="cost" label="消耗萌宠币" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="created_at" label="互动时间" show-overflow-tooltip>
            </el-table-column>
        </el-table>
        <div style="text-align: right;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="search.page" :page-sizes="[10, 20, 30, 40, 100]" :page-size="search.size" background
                layout="total, sizes, prev, pager, next" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loading:false,
            search: {
                id: "",	//true	int		直播间 id
                page: 1,	//true	int		当前页
                size: 10,	//true	int		每页多少条
            },
            tableData: [],
            total: 0,
        }
    },
    created() {
        if(this.$route.query.id) {
            this.search.id = this.$route.query.id
            this.getList()
        }
    },
    methods: {
        // 直播间列表
        async getList() {
            this.loading = true
            let res = await this.$request({
                url: '/admin/live.list/giftRecords',
                method: 'get',
                params: this.search
            })
            this.loading = false
            if (res.code == 200) {
                this.tableData = res.result.data
                this.total = res.result.total
            }
        },
        //分页
        handleSizeChange(e) {
            this.search.size = e;
            this.getList()
        },
        handleCurrentChange(e) {
            this.search.page = e;
            this.getList()
        },
    }
}
</script>

<style lang="scss">
.table {
    padding: 12px 20px;
    background: #fff;
}
</style>